<script lang="ts" setup>
//文章页
import Aside from "@/components/Black/Aside.vue";
import Main from "@/components/Single/Main.vue";
import Contact from "@/components/Single/Contact.vue";
import Recommend from "@/components/Single/Recommend.vue";
import Brand from "@/components/Single/Brand.vue";
import Meat from "@/components/Single/Meat.vue";

import { ref, watch, onMounted } from "vue";
import { IndexShowData, GetOptionData } from "@/api/interface";
import { useRoute } from "vue-router";
import useGetData from "@/store/get";

//实例化路由
const route = useRoute();
// 实例化 store
const store = useGetData();

//传入文章ID，返回文章用数据
const GetPostData = async (id: number) => {
  //将ID组成数组
  const arr = [id];
  const post = await store.packagePostData(arr);
  
  return post[0];
  //}
};

//保存当前文章ID
const id = ref(0);

//存储文章数据
const contentData = ref<IndexShowData>();

onMounted(async () => {
  //拿到当前路由文章ID
  id.value = Number(route.params.id);
  //获取文章所需数据
  contentData.value = await GetPostData(id.value);
  //检查配置信息
  store.GetOptionData();
});

//当文章ID发生变化时更新数据
watch(
  () => Number(route.params.id),
  async (newVal) => {
    //文章ID变化了，这里重新获取文章的值
    id.value = newVal;
    contentData.value = await GetPostData(newVal);
  }
);

//传给内容子组件
const mainData = ref();
//传给相关推荐子组件
const sellData = ref<IndexShowData["cat"] | null>(null);

//监听，文章Axios有结果了就传值
watch(contentData, (newVal) => {
  //进行判断
  if (newVal !== undefined) {
    mainData.value = newVal;
    sellData.value = newVal.cat;
  }
});
</script>

<template>
  <!--公告-->
  <Aside></Aside>
  <section>
    <article class="article">
      <!--文章内容-->
      <Main :data="mainData"></Main>

      <!--附加功能-->
      <div class="docsanddownloads component">
        <div class="component-content">
          <Meat></Meat>
        </div>
      </div>

      <!--媒介垂询 -->
      <div class="presscontacts component">
        <div class="component-content">
          <Contact></Contact>
        </div>
      </div>

      <!--相关推荐 -->
      <Recommend :data="sellData" :id="id"></Recommend>
    </article>
    <!--品牌-->
    <Brand></Brand>
  </section>
</template>

<style lang="less" scoped>
//媒介垂询
.presscontacts.component {
  margin-bottom: 52px;
  margin-top: 52px;
  .component-content {
    border-top: 1px solid #d2d2d7;
    padding-top: 52px;
  }
}
.presscontacts {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1068px) {
  .presscontacts.component {
    margin-bottom: 48px;
    margin-top: 48px;
  }
  .presscontacts {
    .component-content {
      padding-top: 48px;
    }
  }
}
@media only screen and (max-width: 734px) {
  .presscontacts.component {
    margin-bottom: 44px;
    margin-top: 44px;
  }

  .presscontacts {
    .component-content {
      padding-top: 44px;
    }
  }
}
</style>
